LeadMark

Lead Generation HTML Landing Page Template

Hire Me First Portfolio Second Portfolio

LeadMark is HTML landing page template with modern and clean features. In addition real flexibility and customization. We hope you like it! :)

Welcome! First of all we want to thank you for purchasing our Premium Startup Landing Page Template
We really do appreciate every sale. If you like our work please do not forget to rate it. It helps us in developing new and better items.

Rate Item

In the following sections we will explain how to set up and use it the easiest way possible. If you have any questions that you feel should have been in this document you can contact us through our profile page on themeforest.net/user/morad and we'll get back to you as soon as possible. Thanks so much!!!

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit this tempate.

Use Firebug or Chrome Developer Tools.

Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

Quickly find what you are looking for in this document by using your browser's "Find in Page" feature, typically Control + F.

Don't forget to re-explore the live demo for layouts, usage ideas and sample code.

Based on Twitter Bootstrap 3.3.5
Built With Sass
100% W3C Valid Files
Fully Responsive Layout (PC, Tablet and Mobile phone)
Cross Browser Compatible (Chrome, Opera, Safari, Mozzila, IE9+)
Taking Care of Content Possibilities
Banner Parallax
2 Leadgen Forms
5 Content Blocks
11 Skins color
Unlimited Colors
Working PHP Form With Validation
Very Easy to Customize
Very Detailed Documentation
Font Awesome Icons
ET Line Icons
Stack Gap Icons
Over 800 Google Web Fonts You Can Use

HTML folder is structured as following:

css - contains all sass and css files

js - contains all js files

images - separated into 2 folders. 1st "general-elements" contains general elements like pattern, logo and related design elements. 2nd "files" contains the images used in preview.

php - contains php files related to forms.

5 .html files - for main page.

In HTML Structure, we will talk about every structure of all content used as possible. These content are as following:

HTML Markup

Travel Tour template is based on Bootstrap v3.3.5 - a collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Bootstrap's base grid is a variation of the grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

The default Bootstrap3 grid system is composed by 12 columns, named like "col-*-1", "col-*-2", "col-*-3"...."col-*-12". Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Each .html file contains the HTML structure of the template. Here is the general structure (shortened):

<div class="container">


<div class="row">

<div class="col-md-12">1 Column - Content goes here</div>

</div>


<div class="row">

<div class="col-md-6">1/2 Column - Content goes here</div>

<div class="col-md-6">1/2 Column - Content goes here</div>

</div>


<div class="row">

<div class="col-md-4">1/3 Column - Content goes here</div>

<div class="col-md-4">1/3 Column - Content goes here</div>

<div class="col-md-4">1/3 Column - Content goes here</div>

</div>


<div class="row">

<div class="col-md-3">1/4 Column - Content goes here</div>

<div class="col-md-3">1/4 Column - Content goes here</div>

<div class="col-md-3">1/4 Column - Content goes here</div>

<div class="col-md-3">1/4 Column - Content goes here</div>

</div>


</div>

General Structure

All HTML files has the same structure. I made this similarity to save time and efforts.

<!DOCTYPE html>
<html lang="en-US">

<head>

    <!-- Meta
    ============================================= -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intial-scale=1, max-scale=1">

    <!-- Stylesheets
    ============================================= -->
    <link href="css/css-assets.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400i,400,700i,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600i,700" rel="stylesheet">

    <!-- Favicon
    ============================================= -->
    <link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
    <link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">

    <!-- Title
    ============================================= -->
    <title>LeadMark</title>

</head>

<body>

    <div id="scroll-progress"><div class="scroll-progress"><span class="scroll-percent"></span></div></div>

    <!-- Document Full Container
    ============================================= -->
    <div id="full-container">

        <!-- Header
        ============================================= -->
        <header id="header" data-scroll-index="0">

            <div id="header-bar-1" class="header-bar">

                .
                .

            </div><!-- #header-bar-1 end -->

            <div id="header-bar-2" class="header-bar sticky text-white">
                
                .
                .

            </div><!-- #header-bar-2 end -->

        </header><!-- #header end -->

        <!-- Banner
        ============================================= -->
        <section id="banner" data-scroll-index="0">

            <div class="banner-parallax" data-banner-height="550">

                .
                .
                .

            </div><!-- .banner-parallax end -->

        </section><!-- #banner end -->

        <!-- Content
        ============================================= -->
        <section id="content">

            <div id="content-wrap">

                .
                .
                .

            </div><!-- #content-wrap -->

        </section><!-- #content end -->

        <!-- Footer
        ============================================= -->
        <footer id="footer">

            <div id="footer-bar-1" class="footer-bar">

                .
                .

            </div><!-- #footer-bar-1 end -->
            <div id="footer-bar-2" class="footer-bar">

                .
                .

            </div><!-- #footer-bar-2 end -->

        </footer><!-- #footer end -->

    </div><!-- #full-container end -->

    <a class="scroll-top-icon scroll-top" href="#"><i class="fa fa-angle-up"></i></a>

    <!-- External JavaScripts
    ============================================= -->
    <script src="js/jquery.js"></script>
        .
        .
    <script src='js/functions.js'></script>

</body>
</html>

Now i will talk about each main section as following:

<head>

<head> contains common meta tags, title, favicon and the attachment of CSS stylesheet.

<head>

    <!-- Meta
    ============================================= -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intial-scale=1, max-scale=1">

    <!-- Stylesheets
    ============================================= -->
    <link href="css/css-assets.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400i,400,700i,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600i,700" rel="stylesheet">

    <!-- Favicon
    ============================================= -->
    <link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
    <link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">

    <!-- Title
    ============================================= -->
    <title>LeadMark</title>

</head>

Body

<body> contains the appearing content like header, main content and footer. JS attachment is at the end of body tag

<body>

    <div id="scroll-progress"><div class="scroll-progress"><span class="scroll-percent"></span></div></div>

    <!-- Document Full Container
    ============================================= -->
    <div id="full-container">

        <!-- Header
        ============================================= -->
        <header id="header">

            <div id="header-bar-1" class="header-bar">

                .
                .

            </div><!-- #header-bar-1 end -->

        </header><!-- #header end -->

        <!-- Banner
        ============================================= -->
        <section id="banner">

            <div class="banner-parallax" data-banner-height="800">

                .
                .

            </div><!-- .banner-parallax end -->

        </section><!-- #banner end -->

        <!-- Content
        ============================================= -->
        <section id="content">

            <div id="content-wrap">

                .
                .
                .

            </div><!-- #content-wrap -->

        </section><!-- #content end -->

        <!-- Footer
        ============================================= -->
        <footer id="footer">

            <div id="footer-bar-1" class="footer-bar">

                <div class="footer-bar-wrap">

                    .
                    .
                    .

                </div><!-- .footer-bar-wrap -->

            </div><!-- #footer-bar-1 end -->

        </footer><!-- #footer end -->

    </div><!-- #full-container end -->

    <a class="scroll-top-icon scroll-top" href="#"><i class="fa fa-angle-up"></i></a>

    <!-- External JavaScripts
    ============================================= -->
    <script src="js/jquery.js"></script>
        .
        .
    <script src='js/functions.js'></script>

</body>

There are 3 uses for the banner, Banner Slider, Banner Parallax and Video Background. This beside a list of header content types, it will be as following:

Banner Parallax
Leadgen 1
Leadgen 2 Mailchimp
Clickthrough

First, the Banner container has the following code:

<!-- Slider
============================================= -->
<section id="banner">
    .
    .
    .
</section><!-- #banner end -->

You have the ability to set custom height to the Banner. Just add data attribute data-banner-height="500" for example to <div class="banner-parallax"> as following:

<!-- Banner
============================================= -->
<section id="banner">

    <div class="banner-parallax" data-banner-height="500">

Each content available within the template will be explained as following:

1. Banner Parallax

You can only use the banner section without slider, just making it work as parallax background. You also can use the same content used in the slider.

Also you can use blur effect on the background image. Just add class blured-bg to <div class="banner-parallax">

It has the following code:

<!-- Banner
============================================= -->
<section id="banner" data-scroll-index="0">

    <div class="banner-parallax" data-banner-height="800">
        <img src="images/files/parallax-bg/img-3.jpg" alt="">
        <div class="overlay-colored color-bg-heading opacity-60"></div><!-- .overlay-colored end -->
        <div class="slide-content">

            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">

                        <div class="banner-center-box text-white text-center">
                            <h1>Create <span class="font-heading-secondary">wonderful</span> Landing page with Our New Template</h1>
                            <div class="description">
                                This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them?
                            </div>
                            <a class="btn popup-btn xx-large rounded colorful hover-colorful-darken mt-60" href="#header">Call To Action</a>
                        </div><!-- .banner-center-box end -->

                    </div><!-- .col-md-10 end -->
                </div><!-- .row end -->
            </div><!-- .container end -->

        </div><!-- .slide-content end -->
    </div><!-- .banner-parallax end -->

</section><!-- #banner end -->

Take care that the first element must be <img> in the .banner-parallax. This img tag is used to set the background of the banner parallax.

You can also use Overlay Pattern and Overlay Colored like used in banner slider and prallax sections in main content of the template.

They use the same way they are using in Banner Slider, but just add these 2 elements before the element with class="slide-content" as shown in the above code.

When you use dark background pre each slide, you can add class "text-white" to <div class="banner-center-box">

Also if you want make texts to be text aligned left, just remove class "text-center" from <div class="banner-center-box">

You have the ability to add Overlay Colored layer and Overlay Pattern layer for each slide.

They will be as following:

Overlay Colored

You can use the style of Overlay Colored layer by adding <div> with class="overlay-colored" directly before .section-inner as shown above.

You can control color and color opacity manually through 2 data attributes that you can include with this .overlay-colored element. Also as another option, you can use custom classes rather than this data attributes.

The 1st data attribute is data-bg-color which accepts only hexadecimal of 6 digits. Look at the code example used above.

The 2nd data attribute is data-bg-color-opacity which controls the opacity of the color. It accepts values from 0 to 1. Look at the code example above.

They are listed as following:

Background Color : Add data-bg-color.
It must have 6 letters of Hex value.
Background Color Opacity : Add data-bg-color-opacity.
You can change the opacity value by adding value between 0 to 1.

Also you can control background color option with custom color class rather than using the data attribute. You can see that there is a class called color-bg-theme added as following:

<div class="overlay-colored color-bg-theme"></div><!-- .overlay-colored end -->

Also you can control background opacity option with custom class rather than using the data attribute. You can see that there is a class called opacity-80 added as following:

<div class="overlay-colored color-bg-theme opacity-80"></div><!-- .overlay-colored end -->

Overlay Pattern

You can use the style of Overlay Pattern layer by adding <div> with class="overlay-pattern" directly before .section-inner and after Overlay Colored as shown above.

You can also control color and color opacity (if you want to use) manually through 2 data attributes that you can include with this .overlay-pattern element. You can get the 2 data attributes from the above overlay Colored.

2. Leadgen 1

There are 2 form styles as horizontal and vertical style. The first one is the Leadgen 1 form, the second will be mentioned in the next section 3. Clickthrough 1

For the current section Leadgen 1, there is a wrapper with <div class="cta-subscribe cta-subscribe-1 box-form">.

Inside this wrapper there is another wrapper for the form which is <div class="box-content">.

The form is <form id="form-cta-subscribe-1"> as show above in the code.

Now i will describe the this horizontal form style as following:

<!-- Banner
============================================= -->
<section id="banner">

    <div class="banner-parallax" data-banner-height="930">
        <img src="images/files/parallax-bg/img-1.png" alt="">
        <div class="slide-content">

            <div class="container">
                <div class="row">
                    <div class="col-md-6">

                        <div class="banner-center-box">
                            <span class="tag-label">Call Us: 01093515252</span>
                            <h1>
                                Get Best
                                <br>
                                Business Deal
                            </h1>
                            <div class="description">
                                This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them?
                            </div>
                            <div class="cta-subscribe cta-subscribe-1 box-form">
                                <div class="box-content">
                                    <div class="cs-notifications">
                                        <div class="cs-notifications-content"></div>
                                    </div><!-- .cs-notifications end -->
                                    <form id="form-cta-subscribe-1" class="form-inline">
                                        <div class="form-group">
                                            <span class="field-icon"><img src="images/general-elements/field-icon-1.png" alt=""></span>
                                            <input type="text" name="cs1Email" id="cs1Email" class="form-control" placeholder="Your Email Here">
                                            <input type="submit" class="form-control" value="Call To Action">
                                        </div><!-- .form-group end -->
                                    </form><!-- #form-cta-subscribe-1 end -->
                                </div><!-- .box-content end -->
                            </div><!-- .box-form end -->
                        </div><!-- .banner-center-box end -->

                    </div><!-- .col-md-6 end -->
                </div><!-- .row end -->
            </div><!-- .container end -->

        </div><!-- .slide-content end -->
        <div class="section-separator rounded bottom">
            <div class="ss-content">
                <img class="svg" src="images/general-elements/section-separators/rounded.svg" alt="">
            </div><!-- .ss-content -->
        </div><!-- .section-separator -->
    </div><!-- .banner-parallax end -->

</section><!-- #banner end -->

You can add custom error and success message for the header form validation.

There are 2 data attributes that you can you for this purpose.

These 2 data attributes are data-error-msg and data-success-msg.

Use these 2 data attribute can be added to <div class="cs-notifications">.

Use them with the proper value you want. This useful for different languages support as its controlled by js.

So it's a good option to get some way to edit it flexibly.

Also, there is ability to add support for the language that error messages appear with. This is supported by the validation plugin used with the contact form.

Here is how the related language file is attached:

    <!-- External JavaScripts
    ============================================= -->
    .
    .
    <script src='js/jquery.validate.min.js'></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ar.js"></script>
    .
    .

Just attach the proper javascript line (directly after jquery validate attachment) that match the language you want form the following list of CDNs:

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ar.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_bg.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ca.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_cs.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_da.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_de.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_el.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_es.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_eu.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fa.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fi.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fr.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_he.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_hu.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_it.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ja.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_kk.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_lt.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_lv.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_nl.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_no.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_pl.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ro.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ru.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_si.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_sk.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_sl.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_th.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_tr.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_vi.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/methods_de.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/methods_nl.js

After a user fill the form successfully, the php file that called cs1-process.php in php folder is sending the data entered to the email assign in the cs1-process.php. In this file, you will find in line 6 a variable called $EmailTo. Set its value to the email you want.

Here is the line of this variable:

<?php
    .
 
$EmailTo = "moradxd@gmail.com";

    .

?>

5. Leadgen 2 [ Mailchimp Subscribe ]

There are 2 form styles; vertical and horizontal. This one style is the vertical one with 2 positions options; left and right.

This one is for the left position style. It's as following:

The use of MailChimp subscribe is available in this template in the banner section.

It has the following code:

<!-- Banner
============================================= -->
<section id="banner">

    <div class="banner-parallax" data-banner-height="930">
        <img src="images/files/parallax-bg/img-1.png" alt="">
        <div class="slide-content">

            <div class="container">
                <div class="row">
                    <div class="col-md-6">

                        <div class="banner-center-box">
                            <span class="tag-label">Call Us: 01093515252</span>
                            <h1>
                                Get Best
                                <br>
                                Business Deal
                            </h1>
                            <div class="description">
                                This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them?
                            </div>
                            <div class="cta-subscribe cta-subscribe-1 box-form">
                                <div class="box-content">
                                    <div class="cs-notifications">
                                        <div class="cs-notifications-content"></div>
                                    </div><!-- .cs-notifications end -->
                                    <form id="form-cta-subscribe-3" class="form-inline">
                                        <div class="form-group">
                                            <span class="field-icon"><img src="images/general-elements/field-icon-1.png" alt=""></span>
                                            <input type="email" name="cs1Email" id="cs1Email" class="form-control" placeholder="Your Email Here">
                                            <input type="submit" class="form-control" value="Subscribe Now">
                                        </div><!-- .form-group end -->
                                    </form><!-- #form-cta-subscribe-3 end -->
                                </div><!-- .box-content end -->
                            </div><!-- .box-form end -->
                        </div><!-- .banner-center-box end -->

                    </div><!-- .col-md-6 end -->
                </div><!-- .row end -->
            </div><!-- .container end -->

        </div><!-- .slide-content end -->
        <div class="section-separator rounded bottom">
            <div class="ss-content">
                <img class="svg" src="images/general-elements/section-separators/rounded.svg" alt="">
            </div><!-- .ss-content -->
        </div><!-- .section-separator -->
    </div><!-- .banner-parallax end -->

</section><!-- #banner end -->

There is related content with the form which is used to show error popup message with class "cs-notifications". It's existed directly before the form <form id="form-cta-subscribe-3">.

as this form:

<div class="cs-notifications">
    <div class="cs-notifications-content"></div>
</div><!-- .cs-notifications end -->

To use your own mailchimp post URL, in functions.js file, go to the "Mailchimp Subscribe Form" section and change the value of url option in the following code with your own mailchimp post URL:

// *** Mailchimp Subscribe Form *** //
$( "#form-cta-subscribe-3" ).ajaxChimp({
      .
      .
    url: "http://themeforest.us12.list-manage.com/subscribe/post?u=271ee03ffa4f5e3888d79125e&amp;id=163f4114e2" //Replace this with your own mailchimp post URL.
      .
      .
      .
});

NOTE: How to find mailchimp form action URL?

4. Clickthrough

The same form that is used in Leadgen 1 is the same here but will lightbox style.

The button in banner section when it's clicked, it shows up a lightbox with the same form but with vertical style.

This button must have class="popup-btn"

The Popup content is added at the end of <body> tag as following:

<div class="popup-preview">
    <div class="popup-bg"></div>

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">

                <div class="popup-content">
                    <div class="cta-subscribe cta-subscribe-2 box-form">
                        <div class="box-title">
                            <div class="popup-close hamburger hamburger--slider is-active">
                                <span class="hamburger-box">
                                    <span class="hamburger-inner"></span>
                                </span>
                            </div><!-- .popup-close -->
                            <h3 class="title">Get Your Free Quote</h3>
                            <p>Supporting Call to Action Goes Here</p>
                        </div><!-- end .box-title -->
                        <div class="box-content">
                            <form id="form-cta-subscribe-2" class="form-inline">
                                <div class="cs-notifications">
                                    <div class="cs-notifications-content"></div>
                                </div><!-- .cs-notifications end -->
                                <div class="form-group">
                                    <input type="text" name="cs2Name" id="cs2Name" class="form-control" placeholder="Your Name">
                                </div><!-- .form-group end -->
                                <div class="form-group">
                                    <input type="text" name="cs2Email" id="cs2Email" class="form-control" placeholder="Your Email">
                                </div><!-- .form-group end -->
                                <div class="form-group">
                                    <input type="submit" class="form-control" value="Call To Action">
                                </div><!-- .form-group end -->
                            </form><!-- #form-cta-subscribe-2 end -->
                        </div><!-- .box-content end -->
                    </div><!-- .box-form end -->
                </div><!-- .popup-content end -->

            </div><!-- .col-md-6 end -->
        </div><!-- .row end -->
    </div><!-- .container end -->
</div><!-- .popup-preview -->

There is a wrapper with <div class="cta-subscribe cta-subscribe-2 box-form">.

The form is <form id="form-cta-subscribe-2"> as show above in the code.

The deal with cs2-process.php is the same as cs1-process.php in Leadgen 1.

The other things and settings are the same for the horizontal Leadgen 1 section.

In this section, we will talk about sections contents in main content area.

First, i will talk about the general structure of 2 common styles of content which are Flat Section and Parallax Section

Main Content Structure

The main content has the following code:

<!-- Content
============================================= -->
<section id="content">

    <div id="content-wrap">

        .
        .
        .

    </div><!-- #content-wrap -->

</section><!-- #content end -->

For Flat Section and Parallax Section, they will be explained as following:

Now i will show the 1st type, Flat Section as following:

Flat Section

It used for showing content with plan background color without parallax background image effect. This feature has separated section for this purpose.

Flat Section is a div with class "flat-section" as following:

<!-- === Pricing Plans =========== -->
<div id="pricing-plans" class="flat-section">

    <div class="section-content">

        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                
                    <div class="section-title text-center">
                        <span class="icon theme-color-2"><i class="flaticon-target"></i></span>
                            <h2>
                            Pricing Table
                        </h2>
                        <p class="description">
                            This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them?
                        </p>
                    </div><!-- .section-title end -->
                
                </div><!-- .col-md-8 end -->
                <div class="col-md-12">
                
                    .
                    .

                </div><!-- .col-md-12 end -->

            </div><!-- .row end -->
        </div><!-- .container end -->

    </div><!-- .section-content end -->

</div><!-- .flat-section end -->

You also will find div with class="section-content" where you can add the section content.

I use in this example the section call "Intro Features". You will find Section Title where it presents the title of each section. Also it's used in Pricing Table section.

It's made to provide flexibility of how to use it. It has the following code:

<span class="icon theme-color-2"><i class="flaticon-target"></i></span>

You can set the icon used in the section title by using any fontAwesome and Stroke Gap Icons which are included within the template.

You just need to change class of <i class="flaticon-target"></i> to for example <i class="fa fa-cog"></i>

Here are 2 cheatsheets of both icon font sets:

FontAwesome: https://fontawesome.com/cheatsheet
Stroke Gap Icons: http://docteur-abrar.com/wp-content/themes/thunder/admin/stroke-gap-icons/

Parallax Section

This section type is used for showing content with parallax background style effect.

Parallax Section is a div with class "parallax-section" as following:

<!-- === CTA Title 1 =========== -->
<div id="cta-title-1" class="parallax-section text-white">

    <img src="images/files/parallax-bg/img-2.jpg" alt="">
    <div class="overlay-colored color-bg-dark opacity-50"></div><!-- .overlay-colored end -->
    <div class="section-content">

        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    .
                    .
                </div><!-- .col-md-8 end -->
            </div><!-- .row end -->
        </div><!-- .container end -->

    </div><!-- .section-content end -->

</div><!-- .parallax-section end -->

You can specify the Background Image by assigning the first child image inside .parallax-section.

You have the ability to add Overlay Colored layer and Overlay Pattern layer.

They will be as following:

Overlay Colored

You can use the style of Overlay Colored layer by adding <div> with class="overlay-colored" directly before .section-inner as shown above.

The 1st data attribute is data-bg-color which accepts only hexadecimal of 6 digits. Look at the code example used above.

The 2nd data attribute is data-bg-color-opacity which controls the opacity of the color. It accepts values from 0 to 1. Look at the code example above.

They are listed as following:

Background Color : Add data-bg-color.
It must have 6 letters of Hex value.
Background Color Opacity : Add data-bg-color-opacity.
You can change the opacity value by adding value between 0 to 1.

Also you can control background color option with custom color class rather than using the data attribute. You can see that there is a class called color-bg-theme added as following:

<div class="overlay-colored color-bg-theme"></div><!-- .overlay-colored end -->

Also you can control background opacity option with custom class rather than using the data attribute. You can see that there is a class called opacity-80 added as following:

<div class="overlay-colored color-bg-theme opacity-80"></div><!-- .overlay-colored end -->

Overlay Pattern

You can use the style of Overlay Pattern layer by adding <div> with class="overlay-pattern" directly before .section-content and after Overlay Colored as shown above.

Now i will talk about all content section such as Intro Features, Popular Classes, ... to Footer Mini section.

Each section of them is has id of the setion name for the purpose of One Page Scroll Nav or custom styling for this section.

"Intro Features"

It uses Flat Section with id="intro-features".

It has the following code:

<!-- === Intro Features =========== -->
<div id="intro-features" class="flat-section">
        .
        .
        .
    <div class="section-content">

        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    .
                    .
                    .

                </div><!-- .col-md-12 end -->
            </div><!-- .row end -->
        </div><!-- .container end -->

    </div><!-- .section-content end -->

</div><!-- .flat-section end -->

There is carousel slider with class="slider-services" . It has the following code:

<div class="slider-services">
    <ul class="owl-carousel">
        <li>
            <div class="slide">
                <div class="box-info box-info-1 theme-color-3">
                    <div class="box-icon icon"><img src="images/files/box-info-1/icon-1.png" alt=""></div>
                    <div class="box-content">
                        <h4>Best Web Solution</h4>
                        <p>
                            This should be used to tell a story and talk about your product or service.
                        </p>
                        <span class="tag-label">IT Solution</span>
                        <span class="tag-label">Web Design</span>
                    </div><!-- .box-content end -->
                </div><!-- .box-info end -->
            </div><!-- .slide end -->
        </li>
        <li>
            .
            .
        </li>
    </ul>
</div><!-- .slider-services end -->

There is box info with class box-info-1 used in slider-services. It has the following code:

<div class="box-info box-info-1 text-center mb-md-50">
    <div class="box-icon icon x4"><i class="flaticon-setup"></i></div>
    <div class="box-content">
        <h4>Our Mission</h4>
        <p>
            This should be used to tell a story and talk about your product or service.
        </p>
    </div><!-- .box-content end -->
</div><!-- .box-info end -->

There is box info with class box-info-2. It has the following code:

<div class="box-info box-info-1 theme-color-3">
    <div class="box-icon icon"><img src="images/files/box-info-1/icon-1.png" alt=""></div>
    <div class="box-content">
        <h4>Best Web Solution</h4>
        <p>
            This should be used to tell a story and talk about your product or service.
        </p>
        <span class="tag-label">IT Solution</span>
        <span class="tag-label">Web Design</span>
    </div><!-- .box-content end -->
</div><!-- .box-info end -->

There are 4 colors variations for this box info. So you can use these 4 classes where you can add them to .box-info-1 as following:

theme-color-3
theme-color-4
theme-color-5
theme-color-6

There is carousel slider with class="slider-clients" . It has the following code:

<div class="slider-clients">
    <ul class="owl-carousel">
        <li>
            <div class="slide">
                <div class="client-single"><a href="#"><img src="images/files/sliders/clients/img-1.png" alt=""></a></div>
            </div><!-- .slide end -->
        </li>
        <li>
            .
            .
        </li>
    </ul>
</div><!-- .slider-clients end -->

"Pricing Plans"

It uses Flat Section with id="pricing-plans".

It has the following code:

<!-- === Pricing Plans =========== -->
<div id="pricing-plans" class="flat-section">
        .
        .
        .
    <div class="section-content">

        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    .
                    .
                    .

                </div><!-- .col-md-12 end -->
            </div><!-- .row end -->
        </div><!-- .container end -->

    </div><!-- .section-content end -->

</div><!-- .flat-section end -->

There is Pricing Table used with class="pricing-table" . It has the following code:

<div class="pricing-table">

    <div class="row">
        <div class="col-md-4 col-sm-6">

            <div class="pt-column">
                <div class="pt-column-header">
                    <div class="title">
                        <span>Free Plan</span>
                    </div><!-- .title end -->
                    <div class="price">
                        <h1><span>Free</span></h1>
                        <span class="period">Per Month</span>
                    </div><!-- .price end -->
                </div>
                <ul class="pt-column-content">
                    <li>
                        This should be used to tell a story and talk about your product or service.
                    </li>
                </ul><!-- .pt-column-content end -->
                <div class="pt-column-footer">
                    <a class="btn colorful small hover-dark" href="#">Get Started</a>
                </div><!-- .pt-column-footer end -->
            </div><!-- .pt-column end -->

        </div><!-- .col-md-4 end -->
        <div class="col-md-4 col-sm-6">

            <div class="pt-column featured">
                .
                .
            </div><!-- .pt-column end -->

        </div><!-- .col-md-4 end -->
        <div class="col-md-4 col-sm-6">

            <div class="pt-column">
                .
                .
            </div><!-- .pt-column end -->

        </div><!-- .col-md-4 end -->
    </div><!-- .row end -->

</div><!-- .pricing-table end -->

You can add class="featured" to make a featured column as shown within the content.

"Call To Action - Title 1"

It uses Parallax Section with id="cta-title-1".

It has the following code:

<!-- === CTA Title 1 =========== -->
<div id="cta-title-1" class="parallax-section text-white">

    <img src="images/files/parallax-bg/img-4.jpg" alt="">
    <div class="overlay-colored color-bg-heading opacity-60"></div><!-- .overlay-colored end -->
    <div class="section-content">

        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 text-center">

                    <h1>Your Most <span class="font-heading-secondary">Exciting</span> Landing Page Will Be LeadPower Template</h1>
                    <p>
                        This should be used to tell a story and let your users know a little more about your product or service. How can you benefit them?
                    </p>
                    <a class="btn scroll-to xx-large rounded colorful hover-colorful-darken mt-60" href="#header">Call To Action</a>

                </div><!-- .col-md-10 end -->
            </div><!-- .row end -->
        </div><!-- .container end -->

    </div><!-- .section-content end -->

</div><!-- .parallax-section end -->

Here i will talk about the single pages included within the template.

They will be as following:

Thank You page

1. Thank You page

There is a class="page-thank-you" added to <body> tag.

Inside the banner, there is a video preview box used. It has the following code:

<div class="video-preview vp-banner">
    <a class="img-bg lightbox-iframe" href="https://vimeo.com/45830194">
        <div class="overlay-colored color-bg-heading opacity-30"></div><!-- .overlay-colored end -->
        <img src="images/files/parallax-bg/img-3.jpg" alt="">
    </a><!-- .img-bg end -->
    <a class="video-btn lightbox-iframe" href="https://vimeo.com/45830194">
        <i class="fa fa-play"></i>
    </a><!-- .video-btn end -->
</div><!-- .video-preview end -->

To add your selected lightbox video, change the value of href of both <a class="img-box lightbox-iframe"> and <a class="video-btn lightbox-iframe"> to the one you want.

In this section, i will talk about miscellaneous other contents like Button, Lightboxes, ... etc.

They will be as following:

Buttons
Lightboxes

Buttons

Buttons come with almost all common basic styles around. It comes with 6 styles in both default state and hover state where you can combine and specify these options manually between default state and hover state.

Here is all features included with Buttons:

6 Default States
6 Hover States
5 Sizes
Rounded or Not

First here is the initial code for Buttons as following:

<a class="btn" href="#">
    Read More
</a>

Now i will talk about how to change between Buttons features as following:

6 Default States

There are 6 default states for buttons by adding these following classes to the <a>:

white
transparent-white
dark
transparent-dark
colorful
transparent-colorful

8 Hover States

There are 6 hover states for buttons by adding these following classes to the <a>:

hover-white
hover-transparent-white
hover-dark
hover-transparent-dark
hover-colorful
hover-transparent-colorful

5 Sizes

There are 5 sizes for buttons by adding these following classes to the <a>:

x-small
small
medium
large
x-large

Rounded or Not

You can choose between rounded state or not for buttons by adding "rounded" class to the <a>:

Here an example showing the use of these features:

<a class="btn small colorful hover-dark rounded" href="#">Take a Tour</a>

Lightboxes

There are 3 common type of light boxes are used, Lightbox Image, Lightbox Gallery and Lightbox Iframe.

They will be as following:

Lightbox Image

It used <a> tag. Just add class lightbox-img to it and give the href the destination of the image that will be popuped.

Here is some example:

<a class="overlay lightbox-img" href="images/files/portfolio/lightbox/img-2.jpg"></a>

Lightbox Gallery

It used <a> tag. Just add class lightbox-gallery to it and give the href the destination of the image that will be popuped.

Here is some example:

<a class="overlay lightbox-gallery" href="images/files/portfolio/lightbox/img-2.jpg"></a>

Lightbox Iframe

It used <a> tag. Just add class lightbox-iframe to it and give the href the destination of the video that will be popuped.

Here is some example:

<a class="overlay lightbox-iframe" href="https://vimeo.com/45830194"></a>

In this section, i will talk about general styling features like Skins, Scroll Animation, CSS Helpers ... etc.

They will be as following:

Skins
CSS Helpers

Skins

There are 10 skins included with the template.

In css/scss/skins folder, you will find the 10 skins sass files (beside default one) that you can make change from the 10 skins included.

You will need to add for example @import "skins/_skin-green"; in _variables.scss files as the following:

    .
    .
    .
//  ----------------------------------------------------------------
//     Skins Control
// -----------------------------------------------------------------

@import "skins/_skin-red";
    .
    .
    .

For the example above, what you will need to change is _skin-green to the file name you want to choose.

Here are the 10 skins file names:

_skin-red
_skin-green
_skin-blue
_skin-yellow
_skin-orange
_skin-brown
_skin-light-green
_skin-lamo
_skin-purple
_skin-turquoise

There is a default color file with the name of _skin-default.scss with the default color value. You can remove it or keep it as it is.

If you want to make custom color, just copy and paste on of these files in css/scss/skins folder and edite the color used in it, then replace its name with the included name in the style.scss file.

CSS Helpers

There are some classes you can use to add some Padding, Margin or Height for any elements you want.

They are very useful to optimize content spacing and height to make content looks fit.

Padding

The option of using custom padding is very useful to optimize content spacing and making content looks fit.

In the template, fixed classes are added to apply padding in all directions like left, right, top, bottom, top-bottom and left-right.

The range values is from 0px to 140px with difference 10px for each step.

Now i will show example of each side of padding:

Padding Left

It's named from class pl-10 to pl-140 with step 10px. Here is example:

<div class="pl-10"> . . . </div>

Padding Right

It's named from class pr-10 to pr-140 with step 10px. Here is example:

<div class="pr-10"> . . . </div>

Padding Top

It's named from class pt-10 to pt-140 with step 10px. Here is example:

<div class="pt-10"> . . . </div>

Padding Bottom

It's named from class pb-10 to pb-140 with step 10px. Here is example:

<div class="pb-10"> . . . </div>

Padding Left Right

It's named from class plr-10 to plr-140 with step 10px. Here is example:

<div class="plr-10"> . . . </div>

Padding Top Botom

It's named from class ptb-10 to ptb-140 with step 10px. Here is example:

<div class="ptb-10"> . . . </div>

In small devices, it's sometimes needed to change these applied padding values, so there are also classes made to be applied in the small devices that starts from widths < 992px

Here are examples of how it's applied:

Responsive Padding Left

It's named from class pl-md-10 to pl-md-140 with step 10px. Here is example:

<div class="pl-md-10"> . . . </div>

Responsive Padding Right

It's named from class pr-md-10 to pr-md-140 with step 10px. Here is example:

<div class="pr-md-10"> . . . </div>

Responsive Padding Top

It's named from class pt-md-10 to pt-md-140 with step 10px. Here is example:

<div class="pt-md-10"> . . . </div>

Responsive Padding Bottom

It's named from class pb-md-10 to pb-md-140 with step 10px. Here is example:

<div class="pl-md-10"> . . . </div>

Responsive Padding Left Right

It's named from class plr-md-10 to plr-md-140 with step 10px. Here is example:

<div class="plr-md-10"> . . . </div>

Responsive Padding Top Botom

It's named from class ptb-md-10 to ptb-m-140 with step 10px. Here is example:

<div class="ptb-md-10"> . . . </div>

Margin

The option of using custom margin is very useful to optimize content spacing and making content looks fit.

In the template fixed classes are added to apply margin in all directions like left, right, top, bottom, top-bottom and left-right.

The range values is from 0px to 140px with difference 10px for each step.

Now i will show example of each side of margin:

Margin Left

It's named from class ml-10 to ml-140 with step 10px. Here is example:

<div class="ml-10"> . . . </div>

Margin Right

It's named from class mr-10 to mr-140 with step 10px. Here is example:

<div class="mr-10"> . . . </div>

Margin Top

It's named from class mt-10 to mt-140 with step 10px. Here is example:

<div class="mt-10"> . . . </div>

Margin Bottom

It's named from class mb-10 to mb-140 with step 10px. Here is example:

<div class="mb-10"> . . . </div>

Margin Left Right

It's named from class mlr-10 to mlr-140 with step 10px. Here is example:

<div class="mlr-10"> . . . </div>

Margin Top Botom

It's named from class mtb-10 to mtb-140 with step 10px. Here is example:

<div class="mtb-10"> . . . </div>

In small devices, it's sometimes needed to change these applied margin values, so there are also classes made to be applied in the small devices that starts from widths < 992px

Here are examples of how it's applied:

Responsive Margin Left

It's named from class ml-md-10 to ml-md-140 with step 10px. Here is example:

<div class="ml-md-10"> . . . </div>

Responsive Margin Right

It's named from class mr-md-10 to mr-md-140 with step 10px. Here is example:

<div class="mr-md-10"> . . . </div>

Responsive Margin Top

It's named from class mt-md-10 to mt-md-140 with step 10px. Here is example:

<div class="mt-md-10"> . . . </div>

Responsive Margin Bottom

It's named from class mb-10 to mb-md-140 with step 10px. Here is example:

<div class="mb-md-10"> . . . </div>

Responsive Margin Left Right

It's named from class mlr-md-10 to mlr-md-140 with step 10px. Here is example:

<div class="mlr-md-10"> . . . </div>

Responsive Margin Top Botom

It's named from class mtb-md-10 to mtb-md-140 with step 10px. Here is example:

<div class="mtb-md-10"> . . . </div>

Height

The option of using custom height is very useful to optimize content height of some specific element and making content looks fit. I used it in portfolio single page in the image preview.

It's named from class h-0 to h-900.

From class h-0 to h-100 with step 10px.

From class h-100 to h-900 with step 20px.

Here is example:

<div class="h-10"> . . . </div>

In small devices, it's sometimes needed to change these applied height values, so there are also classes made to be applied in the small devices that starts from widths < 992px

It's named from class h-md-0 to h-md-900.

From class h-md-0 to h-md-100 with step 10px.

From class h-md-100 to h-md-900 with step 20px.

Here is example:

<div class="h-md-10"> . . . </div>

All CSS files css files are stored at "css" folder.

It's all built with Sass. Sass files are existed in css/scss folder.

There are 2 .scss files which compiled to 2 .css files that attached in each html file.

style.scss has all codes and import of _variables.scss file.

css-assets.scss has all general css assets include.

_variables.scss files has all css variables of values used in the template

The style.scss file is as following:

/*=================================================================================

    Theme Name: LeadMark
    Theme URI: http://moradhamdy.com/morad/leadmark-demo
    Description: Business HTML Template
    Author: Morad
    Author URI: http://moradhamdy.com/
    Version: 1.0

    SCSS Stylesheet

===================================================================================*/



// Imports ( Others at Bottom )
// ==================================

@import "_variables";

// ==================================



/**
 * styles.css file is divided as the following:
 *
 * ( 01 ) - General Basics
 * ( 02 ) - Form Settings
 * ( 03 ) - Header
 * ( 04 ) - Banner
 * ( 05 ) - Content
 * ( 06 ) - Single Pages
 * ( 07 ) - Footer
 *
 */

And at the end of style.scss file, it's the place where you can make import of another .scss files as following:

 .
 .
 .

 // Imports ( Rest imports )
 // ==================================



 // ==================================

The css-assets.scss which has all general css assets include, is as following:

/*=====================================================================
 
    CSS ASSETS
    ----------

    Here are all imports of css libraries and helpers like
    Bootstrap, fontAwesome, Owl Carousel, .. etc.

 *=================================================================== */


// CSS Assets Imports
// ==================================

@import "_variables";
@import "bootstrap";
@import "animate.min";
@import "owl.carousel";
@import "owl.theme.default";
@import "font-awesome.min";
@import "et-line";
@import "../fonts/Stroke-Gap-Icons-Webfont/style.css";
@import "../fonts/flaticon-leadpower/font/flaticon.css";
@import "magnific-popup";
@import "hamburgers/hamburgers";
@import "css-helpers";

// ==================================

This template uses several scripts many of which are documented within the template's code. If you're a developer, you will find this particularly useful.

There are jquery plugins used such as Owl-Carousel, Scroll It, Jquery Validate, ... etc.

These files are existed in js folder. Javascript files are attached at the bottom of each HTML. It looks like this:

<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/jRespond.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/simple-scrollbar.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/scrollIt.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.mb.YTPlayer.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/simple-scrollbar.min.js"></script>
<script src='js/functions.js'></script>

For the case of using another language rather than english, you will need to add the proper attachment of js file for header form validation message. I have talked about this in section "Banner".

Here is how you will update the attachment of all js files.

    <!-- External JavaScripts
    ============================================= -->
    .
    .
    <script src='js/jquery.validate.min.js'></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_ar.js"></script>
    .
    .

In the functions.js, there the codes of using plugins and custom scripts.

All codes almost well commented for understanding and customization.

I didn't include PSD files as there is almost no graphical elements are built on Photoshop :)

Fonts

Google Fonts - http://www.google.com/webfonts
Icons FontAwesome - http://fortawesome.github.com/Font-Awesome/

CSS

Bootstrap Framework - http://twitter.github.com/bootstrap/
Animate.css - https://daneden.github.io/animate.css/

Scripts

jQuery - http://www.jquery.com/
jQuery Easing - https://github.com/gdsmith/jquery.easing
Transit - http://ricostacruz.com/jquery.transit/
Stellar.js - https://github.com/markdalgleish/stellar.js/
Owl Carousel - http://owlgraphic.com/owlcarousel/
jQuery Validation - http://jqueryvalidation.org/

PSD

No PSD files included!

Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Regards,
Morad

Here are the updates series information.

Version 1.0

First release.

Version 1.1

Fix

Fix Scroll Top Button css issue.

New Features

Adding Mailchimp subscribe form.
Adding the ability to use Font Icon in section title as another option of image icon.

Files to be Updated

Update style.scss, css-assets.scss in scss folder.
Update style.css, css-assets.css in css folder.
Revise image icon which used in Section Title and replace it with font icon model if you prefer.
Check new index-leadgen-2-mailchimp.html where the mailchimp form used.

Add the Mailchimp js code in the proper place as the new updated files show. IT has the following code:

// *** Mailchimp Subscribe Form *** //
$( "#form-cta-subscribe-3" ).ajaxChimp({
    callback: mailchimpCallback,
    url: "https://themeforest.us12.list-manage.com/subscribe/post?u=271ee03ffa4f5e3888d79125e&amp;id=163f4114e2" //Replace this with your own mailchimp post URL.
});

function mailchimpCallback(resp) {
    // IMPORTANT : The input field must be type="email"
    var $subsMsg = $( ".cs-notifications" );
    if (resp.result === 'success') {
        .
        .
        .

Version 1.2

New Features

Adding the PSD of the template.

Files to be Updated

Check PSD Template folder.

Version 1.3

Fix

Fix Mailchimp Subscribe form js issue.

Files to be Updated

Update Mailchimp code in functions.js file with the new updated code. You can find the mentioned Mailchimp js code starting with function mailchimpCallback(n). Here is a clarification:
```
// *** Mailchimp Subscribe Form *** //

    .
    .
    .

function mailchimpCallback(n){
```

LeadMark

Lead Generation HTML Landing Page Template

Introduction

Tips

Template Features

Files Sructures

HTML Structure

HTML Markup

General Structure

<head>

Body

Banner

1. Banner Parallax

Overlay Colored

Overlay Pattern

2. Leadgen 1

5. Leadgen 2 [ Mailchimp Subscribe ]

4. Clickthrough

Main Content

Main Content Structure

Flat Section

Parallax Section

Overlay Colored

Overlay Pattern

"Intro Features"

"Pricing Plans"

"Call To Action - Title 1"

Single Pages

1. Thank You page

Misc Contents

Buttons

6 Default States

8 Hover States

5 Sizes

Rounded or Not

Lightboxes

Lightbox Image

Lightbox Gallery

Lightbox Iframe

Styling

Skins

CSS Helpers

Padding

Padding Left

Padding Right

Padding Top

Padding Bottom

Padding Left Right

Padding Top Botom

Responsive Padding Left

Responsive Padding Right

Responsive Padding Top

Responsive Padding Bottom

Responsive Padding Left Right

Responsive Padding Top Botom

Margin

Margin Left

Margin Right

Margin Top

Margin Bottom

Margin Left Right

Margin Top Botom

Responsive Margin Left

Responsive Margin Right

Responsive Margin Top

Responsive Margin Bottom

Responsive Margin Left Right

Responsive Margin Top Botom

Height

CSS

Javascript

PSD

Sources & Credits

Fonts

CSS

Scripts

PSD

Support

Updates

Version 1.0